<template>
    <div class="JFGL" >
        <ul>
            <li>
                <h2>签到得鸡腿</h2>
                <div>去签到</div>
            </li>
            <li>
                <h2>签到得鸡腿</h2>
                <div>去签到</div>
            </li>
            <li>
                <h2>签到得鸡腿</h2>
                <div>去签到</div>
            </li>
            <li>
                <h2>签到得鸡腿</h2>
                <div>去签到</div>
            </li>
        </ul>
    </div>
</template>

<script lang='ts' setup>
import {  } from "vue"
    
</script>
 
<style lang = "less" scoped>
        .JFGL{
            ul{
                display: flex;
                justify-content: space-around;
                li{
                    &:hover{
                        cursor: pointer;
                    background-size: 105% 105%;
                    }
                    list-style: none;
                    background: url('@/assets/imgs/jifenduihuan.png') no-repeat;
                    background-size: 100% 100%;
                    height: 168px;
                    width: 24%;
                    transition: all 0.5s;
                    h2{
                        margin-top: 30px;
                        font-size: 18px;
                        color: aliceblue;
                        font-weight: 700;
                        margin-left: 25px;
                    }
                    div{
                            width: 60px;
                            border: 1px solid #fff;
                            color: #fff;
                            text-align: center;
                            padding: 4px 5px 4px 8px;
                            margin-left: 30px;
                        }
                }
                
            }
        }
</style>